<template>
  <div class="building-main">
    <div ref="box" style="height:200px;width:100%;">

    </div>
  </div>
</template>

<script>
import echarts from "echarts"
export default {
  data() {
    return {
      data: [
        {
          value: 200,
          itemStyle: {
            color: "blue"
          }
        },
        {
          value: 210,
          itemStyle: {
            color: "blue"
          }
        },
        {
          value: 220,
          itemStyle: {
            color: "blue"
          }
        },
        {
          value: 230,
          itemStyle: {
            color: "blue"
          }
        },
        {
          value: 240,
          itemStyle: {
            color: "blue"
          }
        },
        {
          value: 250,
          itemStyle: {
            color: "blue"
          }
        },
        {
          value: 200,
          itemStyle: {
            color: "blue"
          }
        }
      ]
    }
  },
  methods: {
    print() {
      let print = echarts.init(this.$refs.box)
      let self = this
      let option = {
        title: [
          {
            text: "楼栋用途统计",
            textStyle: {
              color: "yellow"
            }
          }
        ],
        // color:'red',
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          type: "category",
          data: ["住宅", "商业", "办公", "仓储", "工业", "商住混用", "其他"]
          // data: ['住宅', '商业', '办公', '仓储', '工业', '商住混用', '其他']
        },
        textStyle: {
          color: "yellow"
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            type: "bar",
            data: self.data,
            barWidth: 20

          }]
      }
      print.setOption(option)
    }
  },
  mounted() {
    this.print()
  }
}
</script>

<style>

</style>